<template>
  <div class="placeholder">
    <footer class="footer">
      <!-- <a href="../首页/1-首页.html" class="item">
      <span class="iconfont icon-shouye1"></span>
      <span>首页</span>
    </a>
    <a href="../分类/2-分类.html" class="item">
      <span class="iconfont icon-fenlei"></span>
      <span>分类</span>
    </a>
    <a href="../购物车/3-购物车.html" class="item">
      <span class="iconfont icon-shouye"></span>
      <span>购物车</span>
    </a>
    <a href="../我的/4-我的.html" class="item">
      <span class="iconfont icon-wode"></span>
      <span>我的</span>
    </a> -->
      <router-link
        class="footer_item"
        active-class="active"
        to="/home/goodlist"
      >
        <span class="icon iconfont icon-shouye1"></span>
        <span class="text">首页</span>
      </router-link>
      <router-link class="footer_item" active-class="active" to="/type">
        <span class="icon iconfont icon-fenlei"></span>
        <span class="text">分类</span>
      </router-link>
      <router-link class="footer_item" active-class="active" to="/cart">
        <span class="icon iconfont icon-shouye"></span>
        <span class="text">购物车</span>
      </router-link>
      <router-link class="footer_item" active-class="active" to="/my">
        <span class="icon iconfont icon-wode"></span>
        <span class="text">我的</span>
      </router-link>
    </footer>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.placeholder {
  height: 50px;
}
.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 12px;
  background-color: #fff;
  border-top: 1px solid #f4f4f4;
}

.footer .footer_item {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  height: 50px;
}
.footer .icon {
  font-size: 20px;
}
.active {
  color: #c03131;
}
</style>